﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddressDetails.aspx.cs"
    Inherits="Golf.WebUI.Customers.AddressDetails" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #accordion fieldset
        {
            background: #FCFCFC;
            border: solid 1px #ECEAEA;
            padding: 15px 20px 30px 20px;
            color: #494949;
            margin-bottom: 20px !important;
        }
        label.inputLabel
        {
            width: 9em;
            padding-left: 10px;
            margin: 5px 0;
            padding-right: 10px;
        }
        .alert
        {
            font-size: 11px;
            color: #A3A3A3;
            margin-left: 0.5em;
            margin-right: 5px;
            width: 381px;
        }
        /*文本框*/#accordion input[type=text], input[type=password], textarea
        {
            height: 23px;
            line-height: 23px;
            font-size: 14px;
            border: solid 1px #666;
            padding-left: 5px;
            padding-right: 6px;
            border-radius: .3em;
            width: 200px;
        }
        /*全局外发光样式*/#accordion input[type=text]:focus, input[type=password]:focus, textarea:focus
        {
            transition: border linear .2s,box-shadow linear .5s;
            -moz-transition: border linear .2s,-moz-box-shadow linear .5s;
            -webkit-transition: border linear .2s,-webkit-box-shadow linear .5s;
            outline: none;
            border-color: #666;
            box-shadow: 0 0 8px #666;
            -moz-box-shadow: 0 0 8px #666;
            -webkit-box-shadow: 0 0 8px #666;
            border-radius: .3em; /*设置圆角*/
            border: 1px solid #8bbd05;
            border-style: dashed;
            background-color: Transparent;
        }
        .style1
        {
            width: 129px;
        }
        .style2
        {
            width: 254px;
        }
        .style3
        {
            width: 288px;
        }
        .style4
        {
            width: 107px;
        }
    </style>
    <style type="text/css">
        .cart_Two
        {
            margin: 10px;
            text-align: center;
            float: left;
            width: 380px;
        }
        .__content
        {
            padding: 10px;
            text-align: left;
            font-size: 12px;
            font-weight: 0px;
        }
        .textarea__
        {
            height: 60px;
        }
        input[type=button], .submit
        {
            border: 1px solid #ccc;
            background: none;
            padding: 3px;
            padding-left: 7px;
            padding-right: 7px;
            border-radius: .3em;
            cursor: pointer;
        }
        .onError, .onSuccess, onFocus
        {
            border-radius: .3em;
        }
        select
        {
            padding: 4px;
            border: 1px solid #ccc;
        }
        option
        {
            border: 0px;
        }
        /*第三步的购物车*/.pro_Cart
        {
            clear: both;
            width: 100%;
            display: block;
            line-height: 30px;
        }
        .Cart_H
        {
            line-height: 30px;
        }
        .Cart_H li
        {
            border-top: 1px solid #dedede;
            border: 0px;
            background-color: #eaeAEA;
        }
        .pro_Cart li
        {
            float: left;
        }
        .pro_Cart li.Cart_1
        {
            width: 50px;
            border: 1px solid #dedede;
            border-left: 0px;
            border-top: 0px;
            text-align: center;
        }
        .pro_Cart li.Cart_2
        {
            width: 630px;
            border-bottom: 1px solid #dedede;
        }
        .pro_Cart li.Cart_3
        {
            width: 80px;
            border: 1px solid #dedede;
            border-right: 0px;
            border-top: 0px;
            text-align: center;
        }
        .pro_Content li.Cart_1
        {
            line-height: 150px;
        }
        .pro_Content li.Cart_3
        {
            line-height: 75px;
        }
        .pro_Content li.Cart_2
        {
            height: 150px;
        }
        .pro_Content li.Cart_3 span.price, #accordion .price
        {
            color: #b30b12;
            font-size: 2.2em;
            font-weight: bold;
            letter-spacing: -1px;
        }
        .Cart_H li
        {
            border: 0px;
        }
        #email_address
        {
            margin-top: 0px;
        }
        #telephone
        {
            margin-top: 0px;
        }
        div[id$="Tip"]
        {
            height: 20px;
            line-height: 14px;
        }
        div[id$="Tip"] div, .onShow
        {
            border-radius: .5em;
        }
    </style>

    <script src="../../Script/jquery/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

    <script src="../Validator/Script/formValidator-4.1.1.js" type="text/javascript"></script>

    <script src="../Validator/Script/formValidatorRegex.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
            jQuery.formValidator.initConfig({ formID: "form1", theme: "SolidBox", submitOnce: true,
                onError: function(msg, obj, errorlist) {
                    alert(msg);
                },
                onSuccess: function() {
                    var addresstest = $("#DropDownList1 option:selected").val();
                    var sex;
                    if (jQuery(".sex:checked").attr("checked")) {
                        sex = 0;
                    }
                    else {
                        sex = 1;
                    }
                    var firstname = $("#firstname").val();
                    var lastname = $("#lastname").val();
                    var street_address = $("#street_address").val();
                    var city = $("#city").val();
                    var state = $("#state").val();
                    var postcode = $("#postcode").val();
                    var email_address = $("#email_address").val();
                    var telephone = $("#telephone").val();
                    var action = "checkout";
                    var _Country = $("#ddlDest option:selected").text();
                    var _address_id = $("#address_id").val();
                    $.ajax({
                        type: "POST",
                        contentType: "application/x-www-form-urlencoded",
                        url: "/Customers/AddressDetails.aspx?" + Math.random(),
                        data: {
                            "action": action,
                            "sex": escape(sex),
                            "firstname": escape(firstname),
                            "lastname": escape(lastname),
                            "street_address": escape(street_address),
                            "city": escape(city),
                            "state": escape(state),
                            "postcode": escape(postcode),
                            "_country": escape(_Country),
                            "email_address": escape(email_address),
                            "telephone": escape(telephone),
                            "addressId": escape(_address_id),
                            "addresstest": addresstest
                        },
                        success: function(msg) {
                            var _msg = msg.split(',')
                            //                            if (_msg[1] == "add") {
                            //                                $("#DropDownList1").append('<option value="' + _msg[2] + '">' + _msg[3] + '</option>');
                            //                            }
                            alert(_msg[0]);
                        },
                        error: function(xhr) {
                            alert(xhr.responseText);
                        }
                    });
                    return false;
                }
            });
            $("#sex").formValidator({ onShow: "Please choose a salutation", onFocus: "Please choose a salutation", onCorrect: "Input the correct" }).inputValidator({ min: 1, max: 1, onError: "Please choose a salutation" }).defaultPassed();
            jQuery("#firstname").formValidator({ onShow: "Please enter the first name！", onFocus: "The firs tname field cannot be empty", onCorrect: "Congratulations to you, lose on the!" }).inputValidator({ min: 1, onError: "The firs tname field cannot be empty" });
            jQuery("#lastname").formValidator({ onShow: "Please enter your last name", onFocus: "Not null!", onCorrect: "Congratulations to you, lose on the!" }).inputValidator({ min: 1, onError: "The last tname field cannot be empty" });
            jQuery("#street_address").formValidator({ onShow: "Please enter your stree address", onFocus: "Not null!", onCorrect: "Congratulations to you, lose on the!" }).inputValidator({ min: 1, onError: "The street_address field cannot be empty" });
            jQuery("#city").formValidator({ onShow: "Please enter your city", onFocus: "Your City must contain a minimum of 2 characters.", onCorrect: "Congratulations to you, lose on the!" }).inputValidator({ min: 2, onError: "Your City must contain a minimum of 2 characters." });
            jQuery("#state").formValidator({ onShow: "Please enter your state", onFocus: "Not null!", onCorrect: "Congratulations to you, lose on the!" }).inputValidator({ min: 1, onError: "The state field cannot be empty" });
            jQuery("#postcode").formValidator({ onShow: "Please enter your Zip code", onFocus: "Your Post/ZIP Code must contain a minimum of 4 characters.", onCorrect: "Congratulations to you, lose on the!" }).inputValidator({ min: 4, onError: "The postcode field cannot be empty" });
            $("#ddlDest").formValidator({ onShow: "Please enter you Country", onFocus: "Not null!", onCorrect: "Input the correct, thank you", defaultValue: "-1" }).inputValidator({ min: 1, onError: "The country field cannot be empty" }).defaultPassed();

            $("#email_address").formValidator({
                onShow: "Please enter your email",
                onFocus: "Mailbox at least 6 characters, a maximum of 100 characters",
                onCorrect: "Congratulations to you, lose on the!",
                defaultValue: "<%=email_addresss %>"
            }).inputValidator({
                min: 6,
                max: 100,
                onError: "You enter the email length illegal, please confirm"
            }).regexValidator({
                regExp: "^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",
                onError: "You enter the mailbox format is not correct"
            });
            $("#telephone").formValidator({ onShow: "Please enter your telephone", onFocus: "Your Telephone Number must contain a minimum of 6 characters.", onCorrect: "Input the correct, thank you" }).inputValidator({ min: 6, onError: "The telephone field cannot be empty!" }).defaultPassed();

        });
    </script>

    <script type="text/javascript">
        $(function() {
            //add countrys
            var _Bandcountry = "<%=countrys %>";
            //Add attribute
            if (_Bandcountry != "") {

                $("#ddlDest option[value='" + _Bandcountry + "']").attr("selected", "selected");
            }
            var _sex = "<%=sexs %>";
            if (_sex == "0") {
                jQuery(".sex").attr("checked", "checked");
            } else {
                jQuery(".sex1").attr("checked", "checked");
            }

            $("#DropDownList1").change(function() {
                var addresstest = $("#DropDownList1 option:selected").val();
                //Get value empty
                if (addresstest == "-1") {
                    $(".sex:checked").val("");
                    $("#firstname").val("")
                    $("#lastname").val("");
                    $("#street_address").val("");
                    $("#city").val("");
                    $("#state").val("");
                    $("#postcode").val("");
                    $("#email_address").val("");
                    $("#telephone").val("");
                    $("#ddlDest option:selected").text("");
                    $("#address_id").val("");
                    $("#delete").css("display", "none");
                }
                else {
                    //Add remove buttons
                    $("#delete").css("display", "block");
                    $.ajax({
                        type: "POST",
                        contentType: "application/x-www-form-urlencoded",
                        url: "/Customers/AddressDetails.aspx?" + Math.random(),
                        data: {
                            "action": "getAddress",
                            "addresstest": addresstest
                        },
                        success: function(msg) {

                        },
                        error: function(xhr) {
                            alert(xhr.responseText);
                        }
                    });
                }

            });
            $("#delete").click(function() {
                var addresstest = $("#DropDownList1 option:selected").val();
                $.ajax({
                    type: "POST",
                    contentType: "application/x-www-form-urlencoded",
                    url: "/Customers/AddressDetails.aspx?" + Math.random(),
                    data: {
                        "action": "Delete",
                        "addresstest": addresstest
                    },
                    success: function(msg) {
                        if (msg.split(',')[1] == "0") {
                            $("#DropDownList1 option[value='" + addresstest + "']").remove();
                        }
                        alert(msg.split(',')[0]);
                    },
                    error: function(xhr) {
                        alert(xhr.responseText);
                    }
                });
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="0">
        <div style="font-size: 12px; font-weight: 0px;">
            <form id="form2">
            <fieldset>
                <p>
                    Address Details</p>
                <table align="left" cellpadding="0" cellspacing="0" style="line-height: 33px;">
                    <tr>
                        <td class="style1">
                            Save Addresses<span class="alert">*</span>
                        </td>
                        <td class="style2">
                            <asp:DropDownList ID="DropDownList1" runat="server" DataValueField="ID" DataTextField="Address"
                                Width="288px" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                            </asp:DropDownList>
                        </td>
                        <td>
                            <div id="Div1">
                                <asp:Button ID="delete" runat="server" Text="Delete" Enabled="true" CssClass="submit" />
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="style1">
                            <input type="radio" name="gender" class="sex" value="0" id="sex" /><label class="radioButtonLabel"
                                for="gender-male">Mr.</label>
                            <input type="radio" name="gender" value="1" class="sex1" id="sex"><label class="radioButtonLabel"
                                for="gender-female">Ms.</label><span class="alert">*</span>
                        </td>
                        <td class="style2">
                        </td>
                        <td>
                            <div id="sexTip">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="style1">
                            First Name:
                        </td>
                        <td class="style2">
                            <input type="text" name="firstname" size="41" maxlength="96" id="firstname" value="<%=fristnames %>">
                        </td>
                        <td>
                            <div id="firstnameTip">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="style1">
                            Last Name:
                        </td>
                        <td class="style2">
                            <input type="text" name="lastname" size="41" maxlength="96" id="lastname" value="<%=lastnames %>">
                        </td>
                        <td>
                            <div id="lastnameTip">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="style1">
                            Street Address:
                        </td>
                        <td class="style2">
                            <input type="text" name="street_address" size="41" maxlength="192" id="street_address"
                                value="<%=addresss %>">
                        </td>
                        <td>
                            <div id="street_addressTip">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="style1">
                            City:
                        </td>
                        <td class="style2">
                            <input type="text" name="city" size="41" maxlength="96" id="city" value="<%=citys %>">
                        </td>
                        <td>
                            <div id="cityTip">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="style1">
                            Post/Zip:
                        </td>
                        <td class="style2">
                            <input type="text" name="postcode" size="31" maxlength="30" id="postcode" value="<%=postcodes %>">
                        </td>
                        <td>
                            <div id="postcodeTip">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="style1">
                            Country:
                        </td>
                        <td class="style2">
                            <select name="ddlDest" id="ddlDest">
                                <option value="">Select Country</option>
                                <option value="Australia">Australia</option>
                                <option value="Austria">Austria</option>
                                <option value="Belgium">Belgium</option>
                                <option value="CzechRepublic">Czech Republic</option>
                                <option value="Denmark">Denmark</option>
                                <option value="Finland">Finland</option>
                                <option value="France">France</option>
                                <option value="Germany">Germany</option>
                                <option value="Guernsey">Guernsey</option>
                                <option value="Hungary">Hungary</option>
                                <option value="Iceland">Iceland</option>
                                <option value="Ireland">Ireland</option>
                                <option value="Italy">Italy</option>
                                <option value="Jersey">Jersey</option>
                                <option value="Luxembourg">Luxembourg</option>
                                <option value="Netherlands">Netherlands</option>
                                <option value="NewZealand">New Zealand</option>
                                <option value="Poland">Poland</option>
                                <option value="Portugal">Portugal</option>
                                <option value="Slovakia">Slovakia</option>
                                <option value="Spain">Spain</option>
                                <option value="Sweden">Sweden</option>
                                <option value="Switzerland">Switzerland</option>
                            </select>
                        </td>
                        <td>
                            <div id="ddlDestTip">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="style1">
                            State/Province:
                        </td>
                        <td class="style2">
                            <input type="text" name="state" value="<%=provincess %>" size="41" maxlength="96"
                                id="state">
                        </td>
                        <td>
                            <div id="stateTip">
                            </div>
                        </td>
                    </tr>
                </table>
            </fieldset>
            <fieldset style="clear: both;">
                <p>
                    Contact Details</p>
                <table align="left" cellpadding="0" cellspacing="0" style="line-height: 33px;">
                    <tr>
                        <td class="style4">
                            Email Address:
                        </td>
                        <td class="style3">
                            <input type="text" name="email_address" size="41" maxlength="288" id="email_address"
                                value="<%=email_addresss %>">
                        </td>
                        <td>
                            <div id="email_addressTip">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="style4">
                            Telephone:
                        </td>
                        <td class="style3">
                            <input type="text" name="telephone" size="41" maxlength="96" id="telephone" value="<%=tels %>">
                        </td>
                        <td>
                            <div id="telephoneTip">
                            </div>
                        </td>
                    </tr>
                </table>
            </fieldset>
            <br />
            <input type="submit" value="Submit" class="submit" id="sbumit_First" />
            </form>
        </div>
    </div>
    </form>
</body>
</html>
